HTML5 Conference 2018 - スペシャルLTセッション
https://www.youtube.com/watch?v=wG2w-PD8gvU
1000万以上のWebページを AMPにした話
Weblio
春にAMP対応
1088万語を収録している
なぜAMPにしたか
速度改善
SEO
ユーザー数増加
段階的にやっていく
<link>でamphtml
linkがなければ判定されない
単語で最初に一致するかでJS判定して検出していく
有効なAMPか検証する
Chromeのconsole.log
Chrome拡張
npm
AMPコンポーネント
100種類もある
非AMPページでも使える
PureScriptによるSPA開発
AltJSの１つ
Haskellライクな関数型プログラミング言語
圏論での意味合いをしらなくても使える
purescript-halogen
VDOMを利用したUIライブラリ
ビルドプロセスから考えるとCSSの設計を考える
今村謙士
CSS苦手な人と得意な人がいる
アンチパターン
コンポーネントベース開発なのにCSS自体がグローバル
依存がバンドラーから見れない
Code Splitingができない
グローバルネームスペース
ポータビリティが下がる
再利用する難易度があがる
解決：コンポーネントベースで管理する
コードはDRY、出力は非DRY
CSS in JS
出力されて繰り返し使われることがある
解決
スタイルだけの小さいコンポーネントをつくる
プロパティで解決する
{props.isRed}
Preload, Preconnectを利用したSPAサイトのパフォーマンス改善
弥吉修英
ユニクロ
スピード改善事例でデブサミで取り上げられる
Preconnect
Preload
preload as images、fetch
APIリクエストも指定できる
結果：まとめ
TTIを2sec削れた
ルーティングベースで動的に適応することも可能
@spring_raining
HTMLで原稿を組んでCSSでレイアウトを組んでみる
実際にできる（同人誌で発表している）
Vivilostyle
ブラウザで実装されていない機能がつかえる
EPUB Adaptive LayoutをもとにViewを使ってみた
Inside look at modern web browser
https://www.youtube.com/watch?v=ubjEU5lGNEo